import React, {Component} from 'react';

class App extends Component {
    /**
     * 定义状态：
     *  1- constructor中定义
     *  2- constructor外定义
     * 修改状态：
     *  this.setState(异步,异步原因：等所有的同步执行完毕，然后将要更改的所有状态进行收集。将状态进行更改后，调用一次render.)
     *  this.setState是一个函数，第一个参数是对象，第二个参数是函数(当数据状态发生更新，且视图更新后执行)
     */
    num = 1;  // 未将num声明在状态中
    state = {
        num: 100,
        age: 100
    }

    /**
     * 同时使用类属性语法和 constructor 中的 this.state，constructor 中的 state 会覆盖类属性语法中的 state
     */
    constructor() {
        super();
        // 在状态中声明属性2
        this.state = {
            num: 10
        }
    }

    render() {
        return (
            <div>
                <button onClick={() => {
                    this.num++;// 数据会发生变化，但是视图未更新
                }}>{this.num}</button>

                <button onClick={() => {
                    // this.setState({
                    //     num: this.state.num + 1
                    // })
                    // console.log(this.state.num);// 10

                    /**
                     * this.setState是一个函数，第一个参数是对象，第二个参数是函数
                     */
                    // this.setState({
                    //     num: this.state.num + 2
                    // }, () => {
                    //     // 当数据状态发生更新，且视图更新后执行
                    //     console.log(this.state.num, document.querySelectorAll("button")[1].innerText)// 12 12
                    // })

                    /**
                     * this.setState是异步的
                     * 以下程序干了两件事件：
                     */
                    // 1- this.setState({num:10});
                    // 2- this.state.num= this.state.num+1;
                    // this.setState({
                    // 	num:this.state.num++
                    // })
                    // console.log(this.state.num);// 11

                    /**
                     * 不建议：因为状态被更改了多次
                     */
                    // this.setState({
                    // 	num:++this.state.num
                    // })

                    /**
                     * setState异步原因：
                     * 等所有的同步执行完毕，然后将要更改的所有状态进行收集.将状态进行更改后，调用一次render.
                     */
                    // this.setState({
                    // 	num:this.state.num+1
                    // })
                    // console.log(this.state.num);// 10
                    // this.setState({
                    // 	num:this.state.num+1
                    // })
                    // console.log(this.state.num);// 10
                    // this.setState({
                    // 	num:this.state.num+1
                    // })
                    // console.log(this.state.num);// 10

                    /**
                     * 多次修改方案1：
                     */
                    // this.setState({
                    //     num: this.state.num + 1
                    // }, () => {
                    //     this.setState({
                    //         num: this.state.num + 1
                    //     }, () => {
                    //         this.setState({
                    //             num: this.state.num + 1
                    //         })
                    //     })
                    // })

                    /**
                     * 多次修改方案2:prevState是最新要更改的数据状态(建议)
                     */
                    this.setState((prevState) => {
                        console.log(prevState.num);
                        console.log("prevState", prevState);
                        return {
                            // 要将状态num更改为11
                            num: prevState.num + 1
                        }
                    })
                    this.setState((prevState) => {
                        // prevState:最新的状态
                        console.log(prevState.num);
                        return {
                            // 状态更改
                            num: prevState.num + 1
                        }
                    })
                }}>{this.state.num}</button>
            </div>
        );
    }
}

export default App;